<template>
  <div class="rootSet">
    <div class="nav">机器人配置</div>

    <el-card>
      <h5>选择不同的客户回复进行创建或更改对话场景</h5>
      <el-form ref="form" :model="form" label-width="120px" size="mini">
        <el-form-item label="【课程名称】">
          <el-select v-model="form.name" placeholder="请选择场景">
            <el-option label="保养电话邀约" value="保养电话邀约"></el-option>
            <!-- <el-option label="区域二" value="beijing"></el-option> -->
          </el-select>
        </el-form-item>
        <el-form-item label="【场景配置】">
          <el-select v-model="form.type" placeholder="请选择场景">
            <el-option label="异议点1" value="异议点1"></el-option>
            <el-option label="异议点2" value="异议点2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card v-show="form.type">
      <div slot="header" class="spw">
        <span></span>
        <el-button type="primary" size="mini" @click="SaveAdd">保 存</el-button>
      </div>

      <!-- <el-table :data="tableData" style="width: 100%" border>
        <el-table-column prop="name1" label="识别意图点"></el-table-column>
        <el-table-column prop="name2" label="引导考核点"></el-table-column>
        <el-table-column prop="name3" label="客户表达"></el-table-column>
        <el-table-column label="选择">
          <template slot-scope="scope">
            <el-checkbox :value="scope.row.check" @change="checkClick(scope.row)">选择</el-checkbox>
          </template>
        </el-table-column>
      </el-table> -->

      <div class="rootSetImg">
        <div>
          <!-- @change="checkClick('1')" -->
          <el-checkbox v-model="checkedata.checked1" @change="Save"></el-checkbox>
          <br />
          <!-- @change="checkClick('2')" -->
          <el-checkbox v-model="checkedata.checked2" @change="Save"></el-checkbox>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'rootset',
  data() {
    return {
      checkedata: {
        checked1: false,
        checked2: false,
      },

      form: {},
      tableData: [],
    };
  },
  created() {
    // this.checkedata = JSON.parse(localStorage.getItem('checkedata')) || {
    //   checked1: true,
    //   checked2: false,
    // };
  },
  methods: {
    SaveAdd() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      });
      setTimeout(() => {
        loading.close();
        this.$message.success('保存成功');
      }, 2000);
    },

    checkClick(data) {
      if (data == 1) {
        this.checkedata.checked1 = true;
        this.checkedata.checked2 = false;
      } else {
        this.checkedata.checked2 = true;
        this.checkedata.checked1 = false;
      }
    },
    Save() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      });
      let data = {
        paperid: 4,
        valid: 0,
        re_classify: '',
        re_idx: '',
      };
      if (this.checkedata.checked1) {
        data.re_classify = 1;
        data.re_idx = 8;
      }
      if (this.checkedata.checked2) {
        data.re_classify = 2;
        data.re_idx = '13,14,15,16,17,18,19,20,21,22';
      }

      this.$axios
        .Postdata('manage/Voicerecordreport.asmx/setExamValidScene', { data: JSON.stringify(this.$Help.QMdata(data)) })
        .then(res => {
          console.log(res);
          loading.close();
          if (res.errcode == 0) {
            this.$message.success('操作成功');
          } else {
            this.$message.error(res.errmsg);
          }
        })
        .catch(res => {
          console.log(res);
          loading.close();
        });
    },

    Savebtn() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      });
      let data = {
        paperid: 4,
        valid: 1,
        re_classify: '',
        re_idx: '',
      };
      this.$axios
        .Postdata('manage/Voicerecordreport.asmx/setExamValidScene', { data: JSON.stringify(this.$Help.QMdata(data)) })
        .then(res => {
          console.log(res);
          loading.close();
          this.checkedata = {
            checked1: false,
            checked2: false,
          };
        })
        .catch(res => {
          console.log(res);
          loading.close();
        });
    },
  },
  mounted() {
    this.Savebtn();
  },
};
</script>

<style scoped>
.nav {
  font-size: 24px;
  line-height: 44px;
}

h5 {
  box-sizing: border-box;

  padding: 10px 0;
}
>>> .el-select {
  width: 100%;
}
.spw {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 20px;
}
.rootSetImg {
  width: 904px;
  background-image: url('../assets/img/rootset.png');
  height: 443px;
  background-size: cover;

  margin-left: 10%;
  display: flex;
  justify-content: flex-end;
}
.rootSetImg > div {
  width: 180px;
  display: flex;
  flex-direction: column;
  text-align: center;
  box-sizing: border-box;
  padding-top: 46px;
  padding-bottom: 112px;
  justify-content: space-around;
}
>>> .el-checkbox {
  margin-right: 0;
}
</style>
